<template>
  <section>
    <el-card class="search-card">
      <BasicTableForm ref="formData"
        isScalingBtn
        :colNumOfRow="4"
        :formColumns="formItemList"
        :dataSource="formData"
        :defaultExpandStatus="false"
        :handleSearchForm="handleQueryForm" />
    </el-card>
    <el-card class="table-card">
      <basic-table
        showActionCol
        :showSelectCol="false"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :tableHeight="460"
        :actionColWidth="180"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <div slot="content_context">
          <el-button
            v-show="showBtn('导出') && supplierExportConfig.supplier"
            :disabled="!pagination.total"
            size="mini"
            icon="el-icon-download"
            type="primary"
            :loading="exporting"
            @click="handleExportFile"
          >导出</el-button>
          <el-button
            v-if="showBtn('新增')"
            size="mini"
            type="primary"
            @click="handleCreateSupplier"
            >新建黑名单</el-button>
        </div>
      </basic-table>
    </el-card>
    <ConvertSupplierDialog
      :convertType="convertType"
      :supplier="supplier"
      :dialogVisible="dialogVisible"
      @handleClose="handleDialogClose" />
  </section>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import { getBtnsId } from '@/libs/btnsPermission';
import BasicTableForm from '@/components/supplier/BasicForm'; // 表单组件
import BasicTable from '@/components/supplier/BasicTable';
// import BaseList from '@/mixins/supplier/baseList'; // 表格Mixin
import ConvertSupplierDialog from '@/pages/supplier/components/convertSupplierDialog'; // 转化弹窗
import {
  querySupplierBlacklistListService,
  exportSupplierBlacklistFileService
} from '@/api/supplier/management/supplierBlacklist';
import { createExcelByExport } from '@/utils/bizUtils';
import { getHasIndexTableData } from '@/pages/supplier/utils/bizUtils';
import { INITIAL_FIELDS_VALUE, FORM_ITEM_LIST, initTableColumns } from './constants';
export default {
  // mixins: [ BaseList ], // 分页数据及方法
  components: {
    BasicTableForm,
    BasicTable,
    ConvertSupplierDialog,
  },
  data () {
    return {
      formItemList: FORM_ITEM_LIST,
      tableInfo: {
        list: [],
        selection: [],
        columns: [],
        loading: false
      },
      pagination: {
        current: 1,
        total: 0,
        size: 10
      },
      formData: Object.assign({}, INITIAL_FIELDS_VALUE),
      toolbarConfig: {
        slots: {
          // 自定义工具栏模板
          buttons: 'toolbar_buttons',
        }
      },
      convertType: '20',
      dialogVisible: false,
      supplier: {},
      exporting: false
    };
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn']),
  },
  created () {
    this.tableInfo.columns = initTableColumns(this)
    sessionStorage.setItem('buttonId', getBtnsId('查询'));
    this.getTableData();
  },
  methods: {
    ...mapMutations('supplier/baseList', [
      'setSupplierItemData',
    ]),
    handleExportFile () {
      this.exporting = true
      exportSupplierBlacklistFileService(this.getRequestParams()).then((res) => {
        this.exporting = false
        createExcelByExport({ excelTitle: '黑名单供应商信息', res })
      })
    },
    handleQueryForm () {
      this.getTableData(1);
    },
    // 页码切换
    handlePageChange (val) {
      this.getTableData(val);
    },
    // 每页条数切换
    handlePageSizeChange (val) {
      this.getTableData(1, val);
    },
    // 获取列表查询参数
    getRequestParams () {
      const {
        createDate: [startTime, endTime],
        createUser = '',
        mainCategoryId = '',
        supplierClassify = '',
        supplierCode = '',
        supplierName = '',
        supplierType = '',
      } = this.formData
      return {
        supplierCode,
        supplierName,
        supplierType,
        supplierClassify,
        mainCategoryId,
        createUser,
        startTime,
        endTime,
      }
    },
    async getTableData (current = this.pagination.current, size = this.pagination.size) {
      this.tableInfo.loading = true
      const params = Object.assign({ current, size }, this.getRequestParams())
      console.log('params :>> ', params);
      const resp = await querySupplierBlacklistListService(params)
      this.tableInfo.loading = false
      if (resp && resp.result) {
        const { records, total, pages } = resp.result
        this.pagination = Object.assign(this.pagination, { current, size, total, pages })
        this.tableInfo.list = getHasIndexTableData(records, this.pagination)
      } else {
        this.tableInfo.list = []
      }
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      return <div>
        <el-button type="text" disabled={!this.showBtn('查看')} nativeOnClick={() => { this.handleViewSupplier(row) }}>查看</el-button>
        <el-button type="text" disabled={!this.showBtn('激活')} nativeOnClick={() => { this.handleActivate(row) }}>激活</el-button>
        <el-button type="text" nativeOnClick={() => { this.handleViewApprovalLog(row) }}>审批日志</el-button>
      </div>
    },
    // 新建黑名单供应商
    handleCreateSupplier () {
      this.convertType = '20'
      this.supplier = {}
      this.dialogVisible = true
    },
    // 查看供应商
    handleViewSupplier (data) {
      this.setSupplierItemData(data)
      this.$router.push({ name: 'viewSupplier', query: { type: '1' } });
    },
    // 黑名单激活
    handleActivate (data) {
      this.convertType = data.supplierClassify == 40331 ? '21' : '22' //  21：潜在激活 22: 合格激活
      this.supplier = data
      this.dialogVisible = true
    },
    // 关闭转化弹窗
    handleDialogClose (data) {
      this.dialogVisible = false
      if (data) {
        this.$message.success('操作成功');
        this.getTableData()
      }
    },
    handleViewApprovalLog (data) {
      console.log(data)
      this.$router.push({ name: 'auditLog', query: { supplierId: data.supplierId, module: 1 } });
    },
    // 查看供应商详情
    handleViewSupplierDetail (row) {
      const routerList = {
        40332: 'viewQualifiedSupplier',
        40331: 'viewPotentialSupplier',
        40899: 'viewCluesSupplier',
      }
      if (row.supplierClassify) {
        const { href } = this.$router.resolve({ name: routerList[row.supplierClassify], query: { id: row.supplierId } });
        window.open(href, '_blank');
      }
    }
  }
}
</script>
